import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import layout from '@/components/element-layout/index.vue'

Vue.use(VueRouter)

/** 路由组件 */
const ROUTE_COMP = {
  template:
    '<div class="w-100 h-100"><transition name="move" mode="out-in"><router-view/></transition></div>'
}

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '',
    name: 'layout',
    component: layout,
    redirect: '/home',
    children: [
      {
        path: '/home',
        name: 'Home',
        component: Home,
        meta: {
          icon: 'el-icon-s-home',
          title: '首页'
        }
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue'),
        meta: {
          icon: 'fa fa-question-circle',
          title: '关于'
        }
      },
      {
        path: '',
        name: 'visula-tech',
        component: ROUTE_COMP,
        meta: {
          icon: 'fa fa-eye',
          title: '可视化技术'
        },
        children: [
          {
            path: '/visula-tech/3d-three',
            name: 'Three',
            component: () => import('@/views/3d-three/index.vue'),
            meta: {
              icon: 'fa fa-cubes',
              title: '3d模型'
            }
          },
          {
            path: '/vis-view',
            name: 'routeDetail',
            component: () => import('@/views/vis-view/index'),
            meta: {
              icon: 'iconfont icon-AFSmyicon-',
              title: 'vis拓扑图'
            }
          },
          {
            path: '/gaode-gis',
            name: 'gaodeGis',
            component: () => import('@/views/gaode-gis/index'),
            meta: {
              icon: 'el-icon-s-promotion',
              title: '高德地图开发'
            }
          },
          {
            path: '',
            name: 'openlayers',
            component: ROUTE_COMP,
            meta: {
              icon: 'el-icon-s-promotion',
              title: 'openlayers开发'
            },
            children: [
              {
                path: '/openlayers/demo1',
                name: 'openlayersDemo1',
                component: () => import('@/views/openlayers/index'),
                meta: {
                  icon: 'fa fa-map-o',
                  title: 'openlayers初识'
                }
              },
              {
                path: '/openlayers/demo2',
                name: 'openlayersDemo2',
                component: () => import('@/views/openlayers/index2'),
                meta: {
                  icon: 'fa fa-map-o',
                  title: 'ol-demo练习'
                }
              }
            ]
          },
          {
            path: '',
            name: 'echart',
            component: ROUTE_COMP, // 嵌套路由必须要有的，<router-view/>用来显示子组件
            meta: {
              icon: 'iconfont icon-AFSshengchanqushi',
              title: 'echart图表'
            },
            children: [
              {
                path: '/visula-tech/echart-map-drilldown',
                name: 'echartMapDrilldown',
                component: () => import('@/views/echart-map-drilldown/index'),
                meta: {
                  icon: 'fa fa-map-o',
                  title: 'echart地图下钻'
                }
              },
              {
                path: '/echart-map',
                name: 'echartMap',
                component: () => import('@/views/echart-map/index'),
                meta: {
                  icon: 'fa fa-map-marker',
                  title: 'echart飞线地图'
                }
              },
              {
                path: '/echart-line',
                name: 'echartLine',
                component: () => import('@/views/echart/index'),
                meta: {
                  icon: 'fa fa-bar-chart',
                  title: 'echart折线图'
                }
              },
              {
                path: '/echart-bar',
                name: 'echartBar',
                component: () => import('@/views/echart/echart-bar/index'),
                meta: {
                  icon: 'fa fa-bar-chart',
                  title: '效率提升柱状图'
                }
              }
            ]
          },
          {
            path: '',
            name: 'jsplumb',
            component: ROUTE_COMP, // 嵌套路由必须要有的，<router-view/>用来显示子组件
            meta: {
              icon: 'iconfont icon-AFSpiliangyixian',
              title: 'jsplumb插件'
            },
            children: [
              {
                path: '/jsplumb-flow',
                name: 'jsplumbFlow',
                component: () => import('@/views/jsplumb-flow/index'),
                meta: {
                  icon: 'fa fa-exchange',
                  title: 'jsplumb流程图'
                }
              },
              {
                path: '/jsplumb-cluster',
                name: 'jsplumbCluster',
                component: () => import('@/views/jsplumb-cluster/index'),
                meta: {
                  icon: 'iconfont icon-AFSwangluoxitong',
                  title: 'jsplumb集群'
                }
              },
              {
                path: '/link-cut',
                name: 'linkCut',
                component: () => import('@/views/link-cut/index'),
                meta: {
                  icon: 'fa fa-random',
                  title: 'jsplumb链路切割'
                }
              }
            ]
          },
          {
            path: '',
            name: 'd3',
            component: ROUTE_COMP,
            meta: {
              icon: 'el-icon-s-promotion',
              title: 'd3.js开发'
            },
            children: [
              {
                path: '/d3/demo1',
                name: 'd3Demo1',
                component: () => import('@/views/d3/index'),
                meta: {
                  icon: 'fa fa-map-o',
                  title: 'd3初识'
                }
              }
            ]
          }
        ]
      },
      {
        path: '/device-port',
        name: 'devicePort',
        component: () => import('@/views/device-port/index'),
        meta: {
          icon: 'fa fa-th',
          title: '设备端口选择1'
        }
      },
      {
        path: '/device-port-2',
        name: 'devicePort2',
        component: () => import('@/views/device-port-2/index'),
        meta: {
          icon: 'fa fa-th',
          title: '设备端口选择2'
        }
      },
      {
        path: '/route-detail',
        name: 'routeDetail',
        component: () => import('@/views/route-detail/index'),
        meta: {
          icon: 'iconfont icon-AFSliuchengliebiao',
          title: '路由详情'
        }
      },
      {
        path: '/dynamic-table',
        name: 'routeDetail',
        component: () => import('@/views/dynamic-table/index'),
        meta: {
          icon: 'fa fa-table',
          title: '动态表格'
        }
      },
      {
        path: '/alarm',
        name: 'alarm',
        component: () => import('@/views/alarm/index'),
        meta: {
          icon: 'fa fa-file-picture-o',
          title: '告警图片下载'
        }
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router
